<template lang="pug">
  header(class="header")
    a(href="http://news.baidu.com/") 新闻
    a(href="http://news.baidu.com/") hao123
    a(href="http://news.baidu.com/") 地图
    a(href="http://news.baidu.com/") 视频
    a(href="http://news.baidu.com/") 贴吧
    a(href="http://news.baidu.com/") 学术
    div.login
      div.login-button(@click="isLoginBox=true") 登录
      //登入框
      loginBox(v-show="isLoginBox" @Close="childClose")
    set
    rightAside
</template>

<script>
import loginBox from '../LoginBox/loginBox'
import rightAside from '../rightAside/rightAside'
import Set from '../Set/set'

export default {
  name: 'top',
  components: {
    Set,
    rightAside,
    loginBox
  },
  data () {
    return {
      isLoginBox: false
    }
  },
  methods: {
    // 父组件监听子组件的回调方法
    childClose (s) {
      this.isLoginBox = s
    }
  }
}
</script>

<style scoped lang="stylus">
  .header
    font-size 13px
    display: flex
    justify-content:flex-end
    align-items:baseline
    color: #333
    margin: 19px 10px 5px 0
    a
      color: #333
      margin-left 20px
      font-weight:700
    .login
      .login-button
        margin-left: 20px
        cursor pointer
</style>
